<template>
    <div style="width: 100%">
      <el-scrollbar class="scrollBox" style="max-height: 200px">
        <div style="max-height: 200px">
          <div class="files" v-for="(item, i) in props.list" :key="i">
            <div class="name">{{ item.fileName || item.name }}</div>
            <span
              v-if="!isEdit"
              style="color: #1abc9c; cursor: pointer; white-space: nowrap"
            >
              <span
                style="margin: 0 4px"
                v-if="getFileType(item)"
                @click="handleSee(item)"
                class="link"
              >
                查看
              </span>
              <span @click="downloadFile(item)" class="link"> 下载 </span>
            </span>
            <span style="color: #f56c6c; cursor: pointer" v-else>
              <span @click="deleteFile(item)" class="link"> 删除 </span>
            </span>
          </div>
        </div>
      </el-scrollbar>
      <FilesDetail
        v-if="fielsVisible"
        v-model:dialogVisible="fielsVisible"
        :url="fileUrl"
      ></FilesDetail>
    </div>
  </template>
  
  <script setup lang="ts">
  import FilesDetail from '@/components/filesDetals.vue'
  import openMsgBox from '@/hooks/messageBox.js'
  import { download } from '@/hooks/downLoad'
  const props = defineProps({
    list: {
      type: Array<any>,
      default: [],
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  })
  
  const downloadFile = (row) => {
    const url = row.url || row.fileUrl
    const name = row.name || row.fileName
    download({ url, name })
  }
  const fielsVisible = ref(false)
  
  const fileUrl = ref('')
  
  const handleSee = (row) => {
    fielsVisible.value = true
    fileUrl.value = row.url || row.fileUrl
  }
  const getFileType = (row) => {
    const url = row.url || row.fileUrl
    const arr = url.split('.')
    const type = arr[arr.length - 1]
    if (type == 'jpg' || type == 'png') {
      return true
    }
    return false
  }
  
  const emits = defineEmits(['update:list'])
  const deleteFile = (item) => {
    openMsgBox(
      {
        tips: `是否确定删除该文件?`,
      },
      () => {
        let data = [...props.list]
        data.splice(data.indexOf(item), 1)
        emits('update:list', data)
      },
      () => {}
    )
  }
  </script>
  
  <style lang="scss" scoped>
  .files {
    .name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
      width: 0;
    }
    box-sizing: border-box;
    display: flex;
    border: 1px solid #ddd;
    font-size: 12px;
    padding: 0 16px;
    border-radius: 5px;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 4px;
  }
  </style>
  